import React, { useEffect, useState } from "react"
import { View, Text, PageContainer } from "@tarojs/components"
import categorys from "@/store/categorys"
import { observer } from "mobx-react"
import { categoryType } from "@/types"
import { ToPage, VibrateShort } from "@/utils"
import "./index.scss"

let inited = false
const CategorySelecter: React.FC<{
    value?: number,
    show: boolean,
    onClose?: () => void
    onSure: (category?: categoryType) => void
}> = observer(({ value, show, onClose, onSure }) => {
    const [isVisible, setIsVisible] = useState<boolean>(false)

    const selectItem = (item: categoryType) => {
        onSure(item)
    }

    const toEdit = () => {
        VibrateShort()
        ToPage('/pages/categorys/index')
    }

    useEffect(() => {
        if (show) {
            setIsVisible(true)
        } else {
            setTimeout(() => {                
                setIsVisible(false)
            }, 200)
        }
        if (show) {
            inited = true
        }
        if (inited) {
            VibrateShort()
        }
    }, [show])

    return (
        <>
            {
                isVisible ? <PageContainer show={show} onLeave={onClose} overlay round zIndex={9999}>
                    <View className="dialog-content-container card-background flex-column">
                        <View className="list-title-container">
                            <View className="list-title">常用</View>
                        </View>
                        <View className="list-item-container flex-row flex-warp">
                            {
                                (categorys.categoryList || []).slice(0, 5).map(item => {
                                    return <View className={`btn-item flex-column flex-center ${item.id === value ? 'active' : ''}`}
                                        onClick={() => selectItem(item)}
                                        key={item.id}>
                                        <View className="icon-container flex-column flex-center">
                                            <View className="icon-bg"></View>
                                            <Text className={`iconfont ${item.iconClass}`}></Text>
                                        </View>
                                        <View className="icon-name font-size20">{item.name}</View>
                                    </View>
                                })
                            }
                        </View>
                        <View className="list-title-container">
                            <View className="list-title">其他</View>
                        </View>
                        <View className="list-item-container flex-row flex-warp">
                            {
                                (categorys.categoryList || []).slice(5).map(item => {
                                    return <View className={`btn-item flex-column flex-center ${item.id === value ? 'active' : ''}`}
                                        onClick={() => selectItem(item)}
                                        key={item.id}>
                                        <View className="icon-container flex-column flex-center">
                                            <View className="icon-bg"></View>
                                            <Text className={`iconfont ${item.iconClass}`}></Text>
                                        </View>
                                        <View className="icon-name font-size20">{item.name}</View>
                                    </View>
                                })
                            }
                            <View className="btn-item flex-column flex-center edit-btn"
                                onClick={toEdit}>
                                <View className="icon-container flex-column flex-center">
                                    <View className="icon-bg"></View>
                                    <Text className="iconfont icon-shezhi"></Text>
                                </View>
                                <View className="icon-name font-size20">管理分类</View>
                            </View>
                        </View>
                    </View>
                </PageContainer> : null
            }
        </>
    )
})

export default CategorySelecter